<template>
  <page-header-wrapper>
    <template v-slot:content>
      <div class="page-header-content">
        <div class="avatar">
          <a-avatar size="large" :src="avatar"/>
        </div>
        <div class="content">
          <div class="content-title">
            {{ timeFix }}，{{ nickname }}<span class="welcome-text"></span>
          </div>
          <div> {{ postGroup }} | {{ user.dept.deptName }}</div>
        </div>
      </div>
    </template>
    <!-- <template v-slot:extraContent>
    </template> -->
    <!-- 统计 -->
    <div>
  <a-card
    class="outer-card"
    :bordered="false"
    :body-style="{ padding: '24px' }">
    <div slot="title" class="outer-card-title">

      <a-col :md="8" :sm="24">

            <a-range-picker style="width: 100%" v-model="dateRange" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" allow-clear/>
            <a-button type="primary" @click="handleQuery"><a-icon type="search" />查询</a-button>
                <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</a-button>
              </a-col>


    </div>
    <div>
      <a-row :gutter="24">
        <!-- 第一个小卡片：销售货物数量排名 -->
        <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
          <a-card
            class="project-list"
            style="margin-bottom: 24px;"
            :bordered="false"
            title="销售额统计"
            :body-style="{ padding: 0 }">
            <a slot="extra"></a>
            <div>
              <!-- 这里放置您的统计结果 -->

              <a-row :gutter="16">
      <a-col :span="12">
        <a-card>
          <a-statistic
            title="应收"
            :value="moneyCount[0].yingshou"
            :precision="2"
            style="margin-right: 50px"
          />
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card>
          <a-statistic
            title="让利"
            :value="moneyCount[0].rangli"
            :precision="2"
            style="margin-right: 50px"
          />
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="16">
      <a-col :span="12" style="margin-top: 15px;">
        <a-card>
          <a-statistic
            title="未收"
            :value="moneyCount[0].weishou"
            :precision="2"
            style="margin-right: 50px"
          />
        </a-card>
      </a-col>

      <a-col :span="12" style="margin-top: 15px;">
        <a-card>
          <a-statistic
            title="实收"
            :value="moneyCount[0].shishou"
            :precision="2"
          />
        </a-card>
      </a-col>
    </a-row>












            </div>
          </a-card>
        </a-col>

        <!-- 第二个小卡片：销售额排名 -->
        <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
          <a-card
            class="project-list"
            style="margin-bottom: 24px;"
            :bordered="false"
            title="销售额排名"
            :body-style="{ padding: 0 }">
            <a slot="extra"></a>
            <div>
              <!-- 这里放置您的统计结果 -->
            </div>
          </a-card>
        </a-col>

        <!-- 第三个小卡片：支付状态统计 -->
        <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
          <a-card
            class="project-list"
            style="margin-bottom: 24px;"
            :bordered="false"
            title="支付状态统计"
            :body-style="{ padding: 0 }">
            <a slot="extra"></a>
            <div>
              <!-- 这里放置您的统计结果 -->
              <a-statistic
                  v-for="(item, index) in payStatus"
                  :key="index"
                  :title="getStatisticTitle(item.zhifuzhuangtai)"
                  :value="item.num"
                  style="margin-right: 50px"
                />
            </div>
          </a-card>
        </a-col>

        <!-- 第四个小卡片：销售货物数量排名 -->
        <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
    
          <a-card
            class="project-list"
            style="margin-bottom: 24px;"
            :bordered="false"
            title="销售货物数量排名"
            :body-style="{ padding: 0 }">
            <a slot="extra"></a>
            <div>
              <!-- 这里放置您的统计结果 -->
             
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </a-card>
</div>

  </page-header-wrapper>
</template>

<script>
import { timeFix } from '@/utils/util'
import { mapGetters } from 'vuex'
import { PageHeaderWrapper } from '@/components/ProLayout'
import ruoyiLogo from '@/assets/projects/ruoyi.png'
import antdvLogo from '@/assets/projects/antdv.png'
import { getUserProfile } from '@/api/system/user'
import { selectGoodsMoneyCount, selectGoodsNumCount, selectPayStatus, selectMoneyCount } from '@/api/system/chuku'


export default {
  name: 'Index',
  components: {
    PageHeaderWrapper
  },
  data () {
    return {
// 销售货物的销售额统计
    goodsMoneyCount: null,
    // 销售货物的销售数量统计
    goodsNumCount: null,
    // 支付状态统计
    payStatus: null,
    // 销售额统计
    moneyCount: null,
    dateRange: [],
      noTitleKey: '丁宪明',
      timeFix: timeFix(),
      // 用户信息
      user: {
        dept: {
          deptName: ''
        }
      },
      roleGroup: {},
      postGroup: {},
      // 出库统计
    }
  },
  computed: {
    ...mapGetters([
      'avatar',
      'nickname'
    ])
  },
  created () {
    this.getUser()
    this.getGoodsMoneyCount()
    this.getGoodsNumCount()
    this.getPayStatus()
    this.getMoneyCount()
  },
  mounted () {
  },
  methods: {
      // 获取销售货物的销售额统计
  getGoodsMoneyCount() {
    selectGoodsMoneyCount(this.addDateRange({}, this.dateRange)).then(response => {
      this.goodsMoneyCount = response.rows
    })
  },
  // 获取销售货物的销售数量统计
  getGoodsNumCount() {
    selectGoodsNumCount(this.addDateRange({}, this.dateRange)).then(response => {
      this.goodsNumCount = response.rows
    })
  },
  // 获取支付状态统计
  getPayStatus() {
    selectPayStatus(this.addDateRange({}, this.dateRange)).then(response => {
      this.payStatus = response.rows
    })
  },
  // 获取销售额统计
  getMoneyCount() {
    selectMoneyCount(this.addDateRange({}, this.dateRange)).then(response => {
      this.moneyCount = response.rows
    })
  },

  getStatisticTitle(status) {
      if (status === "M") {
        return "部分支付";
      } else if (status === "Y") {
        return "已支付";
      } else {
        return "未知状态";
      }
    },

      /** 搜索按钮操作 */
      handleQuery () {
        this.getGoodsMoneyCount()
        this.getGoodsNumCount()
        this.getPayStatus()
        this.getMoneyCount()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.dateRange = []
      this.handleQuery()
    },



    // 获取用户信息
    getUser () {
      getUserProfile().then(response => {
        this.user = response.data
        this.roleGroup = response.roleGroup
        this.postGroup = response.postGroup
      })
    },
    onSponsorTabChange (key, type) {
      this[type] = key
    }
  }
}
</script>

<style lang="less" scoped>
  @import "./index.less";
  blockquote {
    padding: 0 1em;
    color: #6a737d;
    border-left: 0.25em solid #dfe2e5;
  }
  .project-list {

    .card-title {
      font-size: 0;

      a {
        color: rgba(0, 0, 0, 0.85);
        margin-left: 12px;
        line-height: 24px;
        height: 24px;
        display: inline-block;
        vertical-align: top;
        font-size: 14px;

        &:hover {
          color: #1890ff;
        }
      }
    }

    .card-description {
      color: rgba(0, 0, 0, 0.45);
      height: 66px;
      line-height: 22px;
      overflow: hidden;
    }

    .project-item {
      display: flex;
      margin-top: 8px;
      overflow: hidden;
      font-size: 12px;
      height: 20px;
      line-height: 20px;

      a {
        color: rgba(0, 0, 0, 0.45);
        display: inline-block;
        flex: 1 1 0;

        &:hover {
          color: #1890ff;
        }
      }

      .download {
        color: rgba(0, 0, 0, 0.25);
        flex: 0 0 auto;
        float: right;
      }
    }

    .ant-card-meta-description {
      color: rgba(0, 0, 0, 0.45);
      height: 44px;
      line-height: 22px;
      overflow: hidden;
    }
  }

  .item-group {
    padding: 20px 0 8px 24px;
    font-size: 0;

    a {
      color: rgba(0, 0, 0, 0.65);
      display: inline-block;
      font-size: 14px;
      margin-bottom: 13px;
      width: 25%;
    }
  }

  .mobile {

    .project-list {

      .project-card-grid {
        width: 100%;
      }
    }

    .more-info {
      border: 0;
      padding-top: 16px;
      margin: 16px 0 16px;
    }

    .headerContent .title .welcome-text {
      display: none;
    }
  }

</style>
